<template style="background-color:#f7f7f7;">
    <el-container>
        <el-container>
            <!--            <el-header></el-header>-->
            <el-main>
                <!--左侧菜单栏-->
                <el-row class="tac" :gutter="20" type="flex" justify="space-between">
                    <el-col :span="4">
                        <h1 class="vueadminTitle">博物馆综合数字资源管理系统</h1>
                        <el-menu
                                default-active="2"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose">

                            <el-menu-item index="1">
                                <i class="el-icon-menu"></i>
<!--                                <span slot="title">活动</span>-->
                                <a href="/ActivityHome" style="text-decoration:none; color: #599ef8">
                                    <span slot="title">活动</span>
                                </a>
                            </el-menu-item>

                            <el-menu-item index="2">
                                <i class="el-icon-menu"></i>
                                <span slot="title">会议</span>
                            </el-menu-item>

                            <el-submenu index="3">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>讲座</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="3-1">日志1</el-menu-item>
                                    <el-menu-item index="3-2">日志2</el-menu-item>
                                    <el-menu-item index="3-3">日志3</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="4">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>项目</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="4-1">引导页配置</el-menu-item>
                                    <el-menu-item index="4-2">积分规则配置</el-menu-item>
                                    <el-menu-item index="4-3">
                                        <a href="/Subscribe" style="text-decoration:none; color: black">
                                            <span slot="title">订阅栏目配置</span>
                                        </a>
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="5">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>研究</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="5-1">管理员权限</el-menu-item>
                                    <el-menu-item index="5-2">普通用户权限</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                        </el-menu>
                    </el-col>

                    <el-col class="activityHomeMain">
                        <div class="user">
                            <span class="username">
                                {{userName}}
                            </span>
                            <img src="../../img/Jerry.jpg" class="userIcon">
                        </div>
                        <!--                <el-divider class="line"></el-divider>-->
                        <div class="line"></div>

                        <div class="title">
                            <h4>活动管理</h4>
                        </div>
                        <div class="searchTitle">
                            <h5>搜索条件</h5>
                        </div>

                        <el-form :label-position="labelPosition" ref="form" :model="form" label-width="80px" style="text-align: left">
                            <el-form-item>
                                <span slot="label" style="white-space: nowrap;">活动名称/主题</span>
                                <el-input
                                        v-model="form.activityName"
                                        prefix-icon="el-icon-search"
                                        style="margin-left: 20px; width: 70%"
                                >
                                </el-input>
                            </el-form-item>
                        </el-form>

                        <el-form :label-position="labelPosition" ref="form" :inline="true" :model="form" label-width="80px" style="text-align: left">

                            <el-form-item label="活动类型">
                                <el-select v-model="form.activityType" placeholder="请选择活动类型" style="margin-left: 20px">
                                    <el-option label="内部活动" value="internal"></el-option>
                                    <el-option label="社教活动" value="socialistEducation"></el-option>
                                    <el-option label="典礼仪式" value="ceremony"></el-option>
                                    <el-option label="学术研讨" value="academic"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="活动时间">
                                <div class="block">
                                    <el-date-picker
                                            v-model="form.activityTime"
                                            type="datetime"
                                            placeholder="选择日期时间">
                                    </el-date-picker>
                                </div>
                            </el-form-item>

                            <el-form-item label="参与人">
                                <el-input v-model="form.participant"></el-input>
                            </el-form-item>
                        </el-form>

                        <div style="margin: 20px 0;"></div>

                        <!--按钮-->
                        <el-form class="buttonBlock" inline="true">
                            <el-button type="primary" @click="dialogFormVisible = true">
                                <i class="el-icon-circle-plus"></i>
                                添加
                            </el-button>

                            <el-button @click="editActivity()">
                                <i class="el-icon-edit"></i>
                                编辑
                            </el-button>
                            <el-button type="danger" @click="delActivity()">
                                <i class="el-icon-remove"></i>
                                删除
                            </el-button>
                        </el-form>

                        <!--                使用dialog实现添加窗口-->
                        <el-dialog title="活动信息" :visible.sync="dialogFormVisible" :append-to-body="true">
                            <upload></upload>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                            </div>
                        </el-dialog>

                        <div style="margin: 20px 0;"></div>

                        <!--活动表格-->
                        <el-table
                                class="subscribeTab"
                                :data="activityList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                                highlight-current-row
                                @current-change="handleCurrentChange"
                                style="width: 100%">

                            <el-table-column prop="activityId" label="编号" width="100">
                            </el-table-column>

                            <el-table-column prop="activityName" label="活动名称" width="260">
                            </el-table-column>

                            <el-table-column prop="activityType" label="活动类型" width="260">
                            </el-table-column>

                            <el-table-column prop="activityTime" label="活动时间" width=260>
                                <template slot-scope="scope">
                                    <i class="el-icon-time"></i>
                                    <span style="margin-left: 10px">{{scope.row.activityTime}}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="resourceQuantity" label="资源数量" width="260">
                            </el-table-column>
                        </el-table>
                        <div style="margin: 20px 0;"></div>
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[1, 2, 3, 4]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="4">
                        </el-pagination>
                    </el-col>
                </el-row>



            </el-main>
        </el-container>
    </el-container>
</template>


<script>
    import upload from "./Upload";
    const secondaryProgOptions = ["文章", "视频", "广播"];
    export default {
        name: "ActivityHome",
        components: {
            upload: upload
        },
        data: function () {
            return {
                labelPosition: 'right',
                currentPage: 1,
                pageSize: 1,
                currentTotal: 0,
                activityTypeList: [
                    "内部活动", "社教活动", "典礼仪式", "学术研讨"
                ],
                checkAll: false,
                checkedSecondaryProgs: ["文章", "视频", "广播"],
                secondaryProg: secondaryProgOptions,
                isIndeterminate: true,
                visible: false,
                dialogFormVisible: false,
                userName: "夏花花",
                form: {
                    activityName: "",
                    activityType: "",
                    activityTime: "",
                    release: false,
                    participant:"",
                    resourceQuantity: "",
                },
                formLabelWidth: '120px',
                newProg: {
                    date: "",
                    newName: "",
                    newSecondaryProg: ["文章", "视频", "广播"]
                },
                activity: {
                    activityId: '',
                    activityName: '',
                    activityType: '',
                    activityTime: '',
                    resourceQuantity: 0,
                },
                indexFlag: 4,
                activityList: [
                    {
                        activityId: '000000',
                        activityName: '机器学习',
                        activityType: "学术研讨",
                        activityTime: '2016-05-04',
                        resourceQuantity: 0,
                        index: "0"
                    },
                    {
                        activityId: '000001',
                        activityName: '党支部大会',
                        activityType: "社教活动",
                        activityTime: '2016-05-04',
                        resourceQuantity: 1,
                        index: "1"
                    },
                    {
                        activityId: '000002',
                        activityName: '毕业典礼',
                        activityType: "典礼仪式",
                        activityTime: '2016-05-04',
                        resourceQuantity: 2,
                        index: "2"
                    },
                    {
                        activityId: '000003',
                        activityName: '实验室组会',
                        activityType: "内部活动",
                        activityTime: '2016-05-04',
                        resourceQuantity: 2,
                        index: "3"
                    },
                ]
            };
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                console.log(`当前页: ${val}`);
            },
            // 新增栏目时的二级栏目复选框
            handleCheckAllChange(val) {
                this.checkedSecondaryProgs = val ? secondaryProgOptions : [];
                this.isIndeterminate = false;
                this.newProg.newSecondaryProg = this.checkedSecondaryProgs
            },
            handleCheckedSecondaryProgChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.secondaryProg.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.secondaryProg.length;
                this.newProg.newSecondaryProg = this.checkedSecondaryProgs
            },
            created() {
                // this.programaList
            },
            Appendzero(obj) {
                if (obj < 10) return "0" + "" + obj;
                else return obj;
            },
            addProg(){ // 添加栏目
                var myDate = new Date()
                var y=myDate.getFullYear();
                var m=myDate.getMonth()+1;
                var d=myDate.getDate();
                // if(pattern.toLowerCase() === 'yyyy-mm-dd'){
                //     return `${y}-${m}-${d}`
                // }else{
                //     var hh = dt.getHours()
                //     var mm = dt.getMinutes()
                //     var ss = dt.getSeconds()
                //
                //     return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                // }
                let tmp = {
                    date: `${y}-${this.Appendzero(m)}-${this.Appendzero(d)}`,
                    name: this.newProg.newName,
                    secondaryProg: this.newProg.newSecondaryProg,
                    progIndex: this.indexFlag
                }
                this.programaList.push(tmp)
                this.indexFlag++
                this.newProg.newName = ""
            },
            // editSecProg(index, row){ // 编辑角色
            //
            // },
            delProg(index){ // 删除角色
                this.programaList.splice(index, 1);
                // for (let i = 0; i < this.backupList.length; i++) {
                //     if (this.backupList[i].progIndex === this.programaList[index].progIndexIndex){
                //         this.backupList.splice(i, 1)
                //         break
                //     }
                // }
            }

        }
    }
</script>

<style>
    .el-menu-vertical-demo {
        text-align: left;
    }
    .buttonBlock {
        text-align: left;
    }
    .user {
        text-align: right;
        /*position: relative;*/
        /*display: table-cell;*/
        /*vertical-align: middle;*/
        /*height: 40px;*/
        /*line-height: 40px;*/
    }
    .username {
        /*vertical-align: middle;*/
        /*height: 40px;*/
        /*line-height: 40px;*/
    }
    .userIcon {
        width: 40px;
        height: 40px;
    }
    .line {
        margin: 8px 0;
        background-color: #73beef;
        border-top: 10px #73beef;
        height: 5px;
        /*border-color: #73beef;*/
    }
    .title {
        /*position: absolute;*/
        text-align: left;
    }
    .searchTitle {
        /*position: absolute;*/
        text-align: left;
    }
    .addButton {
        /*position: absolute;*/
        text-align: right;
        background-color: #f1f2f2;
        width: 100%;
        height: 57px;
        /*margin-top: 10px*/
    }
    .vueadminTitle {
        color: #83beef;
    }
    .subscribeMain {
        background-color: #fff;
    }

    .subscribeTab {
        width: 100%
    }
</style>